<template>
  <div class="grid-auto-columns">
    <h3>grid-auto-columns用法</h3>
    <div class="grid-auto-columns-content">
      <div v-for="item in 9" :key="item" :class="'item' + item">{{ item }}</div>
    </div>
    <pre>
      <span class="remarks">grid-auto-columns用于给没有设置的列设置默认列宽</span>
    </pre>
  </div>
</template>
<script>
import { getRandomColor } from '@/utils/index'
export default {
  name: 'GridAutoColumns',
  data() {
    return {}
  },
  mounted() {
    this.getItemColor()
  },
  methods: {
    getItemColor() {
      document
        .querySelector('.grid-auto-columns-content')
        .childNodes.forEach((s) => (s.style.background = getRandomColor()))
    },
  },
}
</script>
<style lang="less" scoped>
.grid-auto-columns {
  &-content {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-auto-columns: 50px;
    grid-gap: 10px;
    margin: 10px 0px;
  }
  .remarks {
    color: red;
    font-weight: bold;
  }
}
</style>
